<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-04-21 20:58:36
 * @LastEditTime: 2020-04-21 23:45:20
 * @FilePath: \blog-pages\src\components\Live2D.vue
 * @Description: Live2D插件
 -->

<template>
  <svg viewBox="0 0 250 250" aria-hidden="true" />
</template>

<script>
export default {
  name: "Live2D",
  methods: {
    // 封装异步加载资源的方法
    loadExternalResource(url, type) {
      return new Promise((resolve, reject) => {
        let tag;

        if (type === "css") {
          tag = document.createElement("link");
          tag.rel = "stylesheet";
          tag.href = url;
        } else if (type === "js") {
          tag = document.createElement("script");
          tag.src = url;
        }
        if (tag) {
          tag.onload = () => resolve(url);
          tag.onerror = () => reject(url);
          document.head.appendChild(tag);
        }
      });
    }
  },
  created() {
    // 注意：live2d_path 参数应使用绝对路径
    // const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
    const live2d_path = "/static/plugins/live2d/";

    // 加载 waifu.css live2d.min.js waifu-tips.js
    if (screen.width >= 768) {
      Promise.all([
        this.loadExternalResource(live2d_path + "waifu.css", "css"),
        this.loadExternalResource(live2d_path + "live2d.min.js", "js"),
        this.loadExternalResource(live2d_path + "waifu-tips.js", "js")
      ]).then(() => {
        initWidget({
          waifuPath: live2d_path + "waifu-tips.json",
          apiPath: "https://live2d.fghrsh.net/api/"
          //cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
        });
      });
    }
    // initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
    // API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api
    // 初始化看板娘会自动加载指定目录下的 waifu-tips.json
  }
};
</script>

<style scoped>
svg {
  transition: all 1s;
  fill: #222;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  width: 80px;
  height: 80px;
}
</style>
